<template>
  <a-layout style="min-height: 100vh">
    <!-- 左侧导航 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
      :trigger="null"
      :theme="navTheme"
      :width="220"
    >
      <div class="logo">
        <h1 v-if="!collapsed">学校学情系统</h1>
        <!-- <h1 v-else><img class="log" src="../assets/sxdx.gif" alt="" /></h1> -->
        <h1 v-else>学情</h1>
      </div>
      <!-- <div class="logo" /> -->
      <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        :theme="navTheme"
        :inline-collapsed="collapsed"
        @click="handleMenuClick"
      >
        <template v-for="item in menuItemsNew" :key="item.key">
          <a-menu-item v-if="!item.children" :key="item.key">
            <component :is="item.icon" />
            <span>{{ item.label }}</span>
          </a-menu-item>
          <a-sub-menu v-else :key="item.key" :title="item.label">
            <template #icon>
              <component :is="item.icon" />
            </template>
            <a-menu-item v-for="child in item.children" :key="child.key">
              <span>{{ child.label }}</span>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>

    <!-- 右侧内容 -->
    <a-layout>
      <!-- 顶部导航 -->
      <a-layout-header class="header">
        <!-- 收放按钮部分 -->
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <bread-crumb
          class="breadcrumb"
          :titleName="titleName"
          :subtitleName="subtitleName"
          :title_path="title_path"
        />
      </a-layout-header>

      <!-- 内容区域 -->
      <a-layout-content class="content">
        <!-- <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view> -->
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import * as Icons from "@ant-design/icons-vue";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
import BreadCrumb from "@/components/BreadCrumb.vue";
import { Form, Input, Button, message, Modal } from "ant-design-vue";
import http from "../routerutils/http";
import { useStore } from "vuex";
import { dynamicRoutes } from "../router/index";
const store = useStore();
const router = useRouter();
const route = useRoute();
// 导航状态
const navTheme = ref<"light" | "dark">("dark");
const collapsed = ref(false);
const selectedKeys = ref<string[]>([route.path]);
const openKeys = ref<string[]>([]);

// console.log("++++++++++++++++", router.getRoutes());
// 菜单配置--静态菜单
// const menuItems = reactive([
// //   {
// //     key: "/admin/home",
// //     icon: HomeOutlined,
// //     label: "首页",
// //   },
// //   {
// //     key: "/admin/permis",
// //     icon: DesktopOutlined,
// //     label: "系统管理",
// //     children: [
// //       { key: "/admin/permis/user", label: "用户管理" },
// //       { key: "/admin/permis/role", label: "角色管理" },
// //       { key: "/admin/permis/permis", label: "权限管理" },
// //     ],
// //   },
// //   {
// //     key: "/admin/student",
// //     icon: InboxOutlined,
// //     label: "学生管理",
// //   },
// //   {
// //     key: "/admin/exam",
// //     icon: InboxOutlined,
// //     label: "考试管理",
// //   },
// //   {
// //     key: "/admin/work",
// //     icon: AppstoreOutlined,
// //     label: "作业管理",
// //     children: [
// //       { key: "/admin/work/list", label: "作业列表" },
// //       { key: "/admin/work/search", label: "作业分析" },
// //     ],
// //   },
// //   {
// //     key: "/admin/attend",
// //     icon: ScheduleOutlined,
// //     label: "考勤管理",
// //   },
// //   {
// //     key: "/admin/housekeep",
// //     icon: CloudServerOutlined,
// //     label: "内务管理",
// //     children: [
// //       { key: "/admin/housekeep/info", label: "宿舍信息" },
// //       { key: "/admin/housekeep/inspect", label: "内务检查" },
// //     ],
// //   },
// //   {
// //     key: "/admin/count",
// //     icon: BarChartOutlined,
// //     label: "统计分析",
// //     children: [
// //       { key: "/admin/count/overview", label: "概况统计" },
// //       { key: "/admin/count/rank", label: "排名榜单" },
// //       { key: "/admin/count/score", label: "学生成绩分析" },
// //       { key: "/admin/count/trend", label: "学习趋势分析" },
// //     ],
// //   },
// //   {
// //     key: "/admin/sysset",
// //     icon: MailOutlined,
// //     label: "系统设置",
// //     children: [
// //       { key: "/admin/sysset/personinfo", label: "个人信息" },
// //       { key: "/admin/sysset/logout", label: "退出登录" },
// //     ],
// //   },
// // ]);
const all_router1 = router.getRoutes();
// console.log("all_routerall_router", all_router1)
const all_router = dynamicRoutes[0].children;
// 拿到此用户的角色组
const userRoles = store.state.roles || [];
const generateMenuItems = (routes: any) => {
  // 1. 过滤出需要显示在菜单中的路由（根据meta.isMenu）,以及过滤出在用户权限范围之内的目录
  const menuRoutes = routes.filter(
    (route: any) =>
      route.meta?.isMenu !== false &&
      route.meta?.title &&
      route.meta?.roles.some((item: any) => userRoles.includes(item))
  );

  // 2. 构建菜单树结构
  const buildMenuTree = (routes, parentPath = "") => {
    return routes
      .filter((route: any) => {
        // 过滤掉非直接子路由（避免重复）
        const isChildRoute =
          parentPath &&
          route.path.startsWith(parentPath) &&
          route.path !== parentPath;
        return !isChildRoute;
      })
      .map((route: any) => ({
        key: route.meta.path,
        icon: route.meta?.icon ? Icons[route.meta.icon] : null,
        label: route.meta.title,
        children: route.children?.length
          ? buildMenuTree(route.children, route.meta.path)
          : undefined,
      }));
  };

  return reactive(buildMenuTree(menuRoutes));
};
const menuItemsNew = generateMenuItems(all_router);
// console.log("组成成型：：", menuItemsNew);
// 现要根据meta中的数据--配置一个动态菜单
// 现生成一个动态菜单--需要从meta中拿到

// 现生成一个动态菜单--需要从meta中拿到

// console.log("all_routerall_router", all_router);
interface menu_list_R {
  key: string;
  icon: string;
  label: string;
  children?: object;
}
const menu_list = ref<menu_list_R[]>([]);
// const menu_list_fn = (all_meta_data: any) => {
//   // 过滤出isMenu === true的meta
//   const meta_data = all_meta_data.filter((item: any) => {
//     return item.isMenu === true;
//   });
//   // 拿到此用户的角色组
//   const userRoles = store.state.roles || [];
//   // 过滤出此角色可以访问的路由meta
//   const finish_meta = meta_data.filter((item: any) => {
//     // if (item.roles === undefined){
//     //   console.log(item)
//     // }
//     // console.log("item.rolesitem.roles",item.roles)
//     return item.roles.some((role: string) => userRoles.includes(role));
//     // return item.roles.includes(store.state.st)
//   });

//   console.log("finish_metafinish_meta:::", finish_meta);
//   const use_meta = finish_meta.map((item: any) => {
//     // 处理当前菜单项
//     const menuItem: any = {
//       key: item.title_path,
//       // icon: iconComponents[item.icon],
//       label: item.title,
//     };
//     // 处理子菜单（递归）
//     if (item.children && item.children.length > 0) {
//       menuItem.children = menu_list_fn(item.children);

//       // 如果子菜单处理后为空数组，则移除该菜单项
//       if (menuItem.children.length === 0) {
//         return null;
//       }
//     }
//     return menuItem;
//   });
//   // console.log("meta_data:::", finish_meta, use_meta);
//   return use_meta;
//   // menu_list.value = use_meta
// };

// 调用函数生成菜单
// const initMenu = () => {
//   const routerFilter = all_router.filter((item: any) => {
//     return item.children.length !== 0;
//   });
//   const allMetaData = all_router.map((route) => {
//     return route.meta;
//   });
//   // console.log(allMetaData);
//   // menu_list.value = menu_list_fn(allMetaData);
//   menu_list.value = menu_listFn(routerFilter);

//   console.log("生成的菜单数据:", menu_list.value);
// };

// const menu_listFn = (data: any) => {
//   // 拿到此用户的角色组
//   const userRoles = store.state.roles || [];
//   console.log("data>>>>>>>", data);
//   // const filterMeta = data.map((item: any) => {
//   //     // console.log("item>>>>>>1111111111111",item);
//   //     return item.meta
//   //   })
//   //   console.log("filterMeta>>>>>",filterMeta)
//   const menu_list = data
//     .map((item: any) => {
//       // console.log("item>>>>>>1111111111111",item);
//       return item.meta;
//     }) // 过滤含 meta 的项
//     .filter((item: any) => {
//       return item.roles.some((role: string) => userRoles.includes(role)); // 角色匹配
//     })
//     .map((item: any) => {
//       console.log("item————————》》》", item);
//       const menuItem = {
//         key: item.id, // 使用唯一标识
//         // icon: iconComponents[item.icon] || null, // 处理图标不存在的情况
//         label: item.title,
//       };
//       if (item.isHave == true) {
//         menuItem.children = menu_listFn(routeItem.children);
//       }
//       return menuItem;
//     });
// };
// initMenu();
// 自动展开当前路由对应的菜单

const findParentKeys = (path: string) => {
  const result: string[] = [];
  menuItemsNew.forEach((item: any) => {
    if (item.children) {
      const matchChild = item.children.some((child: any) => child.key === path);
      if (matchChild) result.push(item.key);
    }
  });
  return result;
};

const titleName = ref<string>("");
const subtitleName = ref<string>("");
const title_path = ref<string>("");
// 路由变化时更新菜单状态
watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath];
    openKeys.value = findParentKeys(newPath);
    titleName.value = (route.meta.parent_title as string)!;
    subtitleName.value = (route.meta.title as string)!;
    title_path.value = (route.meta.title_path as string)!;
  },
  { immediate: true }
);

// 处理菜单点击
const handleMenuClick = ({ key }: { key: string }) => {
  if (key === "/admin/sysset/logout") {
    handleLogout();
    return;
  }
  router.push(key);
};

// 保持展开状态
watch(collapsed, (val) => {
  if (!val) {
    openKeys.value = findParentKeys(route.path);
  } else {
    openKeys.value = [];
  }
});

// 检查token是否过期
const token_search = async () => {
  try {
    const res = await http.get("/api/users/check");
    if (res.data.code === 200) {
      message.success("当前身份信息依然有效");
    }
  } catch (error: any) {
    console.log("请求失败", error);
    message.warning(error.response.data.message);
  }
};

// ... 其他代码保持不变 ...

const handleLogout = () => {
  Modal.confirm({
    title: "确定要退出登录吗？",
    content: "退出后将返回登录页面，需要重新登录",
    okText: "确认退出",
    cancelText: "取消",
    centered: true,
    onOk: async () => {
      try {
        const res = await http.get("/api/users/logout");
        console.log("操作成功：", res);
        message.success("退出成功");
        // 清除登录凭证
        localStorage.clear();
        // 跳转登录页
        router.replace("/login");
      } catch (error: any) {
        console.log("操作失败", error);
        message.error("退出失败，请重试");
      }
    },
    transitionName: "fade",
  });
};
onMounted(() => {
  token_search();
  // initMenu()
});
</script>

<style scoped>
/* 布局样式 */
.header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.breadcrumb {
  margin-left: 20px;
}

.content {
  margin: 24px;
  padding: 24px;
  min-height: 280px;
  background: #fff;
  border-radius: 4px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 菜单图标对齐 */
:deep(.ant-menu-item),
:deep(.ant-menu-submenu-title) {
  display: flex;
  align-items: center;
}

:deep(.anticon) {
  margin-right: 8px;
}

.logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #001529;
  border-bottom: 1px solid #001529;
  /* margin-bottom: 1px; */
}

.logo .log {
  width: 32px;
  height: 32px;
  line-height: 28px;
}

.logo h1 {
  margin: 0;
  font-size: 25px;
  color: #1890ff;
  font-weight: bold;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
</style>